import { ModalProps, Spin } from "antd"

import { IGameReplayDetail } from "@/api/dxn/type"
import { SGameModalContent, SModalContainer } from "@/components/common/dialogGame/index.styled"
import CommonModal from "@/components/common/modals"

import ReplayInfo from "./components/replayInfo"
import ReplayStep from "./components/replayStep"

interface GameReplayProps {
	dialogLoading: boolean
	replayDetail: IGameReplayDetail
	replayList: any[]
	replayReqResult: string
	children?: React.ReactNode
}

const GameReplay = ({ replayDetail, replayList, dialogLoading, children, ...props }: GameReplayProps & ModalProps) => {
	return (
		<CommonModal width={1000} footer={null} {...props}>
			<SModalContainer>
				{children}
				<SGameModalContent>
					<Spin key="loading" className="loading-modal" spinning={dialogLoading} size="large"></Spin>
					<ReplayInfo handStatus={replayDetail.handStatus} replayInfo={replayDetail.info} isShowSeatCount={true} />
					<div className="gameListContent">
						<ReplayStep
							isShowStepIcon={true}
							isShowPublicCards={true}
							isShowJoinCount={true}
							topInfo={replayDetail.topInfo}
							bottomList={replayDetail.bottomList}
							insurePoolDetail={replayDetail.insurePoolDetail}
						></ReplayStep>

						{replayList.length > 0 && <div className="detailProcess">详细过程</div>}

						{replayList.map((item, index) => (
							<ReplayStep
								key={index + Math.random()}
								isShowStepIcon={true}
								isShowPublicCards={item.topInfo.isShowPublicCards}
								isShowJoinCount={item.topInfo.isShowJoinCount}
								topInfo={item.topInfo}
								bottomList={item.bottomList}
								insurePoolDetail={item.insurePoolDetail}
							/>
						))}
					</div>
				</SGameModalContent>
			</SModalContainer>
		</CommonModal>
	)
}

export default GameReplay
